<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    label="城市"
                    prop="place">
            </el-table-column>
            <el-table-column
                    label="投诉次数"
                    prop="amount">
            </el-table-column>
        </el-table>
        <el-row justify="center" type="flex">
            <el-col :span="10">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="page.currentPage"
                        :page-size="page.size"
                        layout="total, prev, pager, next"
                        :total="page.total" style="text-align: center;margin:15px 15px">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "placeComplaint",
        data() {
            return{
                tableData: [],
                page: {
                    size: 20,//一页几条数据
                    total:100,//总共几条数据
                    currentPage:1,//当前第几页
                },
            }
        },
        methods:{
            getData() {
                this.$http({
                    method: 'get',
                    url: this.$http.adornUrl('/get/carPlaceComplaint'),
                    params:this.$http.adornParams({'current':this.page.currentPage}),
                }).then(form=>{
                        this.tableData = form.data['tableData'];
                        this.page.total = form.data['total'];
                    })
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData();
            }
        },
        mounted() {
            this.getData();
        }

    }
</script>

<style scoped>

</style>